<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询文章</title>
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/demo.css}"/>
	<!--  引入 Layui.css -->
	<link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
	<script th:src="@{/layui/layui.js}"></script>
</head>
<body>
<!-- coidea:loader START -->
<div class="loader">
    <div class="lds-ripple">
        <div></div>
        <div></div>
    </div>
</div>
<!-- coidea:loader END -->

<!-- coidea:sidebar START -->
<aside class="sidebar">
    <div style="position:relative;width:200px;top:25px;color:#fff;opacity:0.7;left:40px;">返回主页</div>
    <div class="logo" style="margin-bottom: 10px;">
        <a th:href="@{/logs/index}"><<</a>
    </div>

    <div style="position:relative;width:200px;top:25px;color:#fff;opacity:0.7;left:40px;">查询其他文章</div>
    <div class="logo">
        <a href="JavaScript:;" onclick="showSearch(this)">+</a>
        <div class="search_input" style=" display: none; width: 250px; height: 35px; margin-top: 10px;">
            <input id="query" placeholder="请输入你要查询的,回车即可查询" type="text"
                   style="width: 100%; height: 100%; border-radius: 10px; border: none; padding: 0px 10px;"/>
        </div>
    </div>
</aside>
<!-- coidea:sidebar END -->

<!-- coidea:header START -->
<header>
    <div class="header-inner">
        <h1>[[${#strings.isEmpty(result.data.query) ? 'ALL' : result.data.query}]]</h1>
    </div>
</header>
<!-- coidea:header END -->

<!-- coidea:grid-list START -->
<section class="grid-holder">

    <!-- coidea:grid-list:navigation+switcher START -->
    <div class="grid-list-layout">
        <nav class="navigation">
            <li th:each="type: ${result.data.typeDto}"><a href="JavaScript:;"
                                                          th:type_value="${type.value}"><span>[[${type.key}]]</span></a>
            </li>
        </nav>

        <div class="grid-list-holder">
					<span class="grid-layout active">

						<!--  两个 -->
						<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                             y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;"
                             xml:space="preserve">
							<g>
								<g>
									<path d="M176.792,0H59.208C26.561,0,0,26.561,0,59.208v117.584C0,209.439,26.561,236,59.208,236h117.584
                C209.439,236,236,209.439,236,176.792V59.208C236,26.561,209.439,0,176.792,0z M196,176.792c0,10.591-8.617,19.208-19.208,19.208
                H59.208C48.617,196,40,187.383,40,176.792V59.208C40,48.617,48.617,40,59.208,40h117.584C187.383,40,196,48.617,196,59.208
                V176.792z"/>
								</g>
							</g>
							<g>
								<g>
									<path d="M452,0H336c-33.084,0-60,26.916-60,60v116c0,33.084,26.916,60,60,60h116c33.084,0,60-26.916,60-60V60
                C512,26.916,485.084,0,452,0z M472,176c0,11.028-8.972,20-20,20H336c-11.028,0-20-8.972-20-20V60c0-11.028,8.972-20,20-20h116
                c11.028,0,20,8.972,20,20V176z"/>
								</g>
							</g>
							<g>
								<g>
									<path d="M176.792,276H59.208C26.561,276,0,302.561,0,335.208v117.584C0,485.439,26.561,512,59.208,512h117.584
                C209.439,512,236,485.439,236,452.792V335.208C236,302.561,209.439,276,176.792,276z M196,452.792
                c0,10.591-8.617,19.208-19.208,19.208H59.208C48.617,472,40,463.383,40,452.792V335.208C40,324.617,48.617,316,59.208,316h117.584
                c10.591,0,19.208,8.617,19.208,19.208V452.792z"/>
								</g>
							</g>
							<g>
								<g>
									<path d="M452,276H336c-33.084,0-60,26.916-60,60v116c0,33.084,26.916,60,60,60h116c33.084,0,60-26.916,60-60V336
                C512,302.916,485.084,276,452,276z M472,452c0,11.028-8.972,20-20,20H336c-11.028,0-20-8.972-20-20V336c0-11.028,8.972-20,20-20
                h116c11.028,0,20,8.972,20,20V452z"/>
								</g>
							</g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
						</svg>
					</span>
            <span class="list-layout">
						<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                             y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;"
                             xml:space="preserve">
							<g>
								<g>
									<path d="M100.923,0C64.276,0,34.462,29.814,34.462,66.462s29.814,66.462,66.462,66.462c36.647,0,66.462-29.814,66.462-66.462
          S137.57,0,100.923,0z M100.923,103.385C80.563,103.385,64,86.821,64,66.462s16.563-36.923,36.923-36.923
          c20.36,0,36.923,16.563,36.923,36.923S121.283,103.385,100.923,103.385z"/>
								</g>
							</g>
							<g>
								<g>
									<path d="M462.769,22.154h-256c-8.157,0-14.769,6.613-14.769,14.769V96c0,8.157,6.613,14.769,14.769,14.769h256
          c8.157,0,14.769-6.613,14.769-14.769V36.923C477.538,28.767,470.926,22.154,462.769,22.154z M448,81.231H221.538V51.692H448
          V81.231z"/>
								</g>
							</g>
							<g>
								<g>
									<path d="M100.923,189.538c-36.647,0-66.462,29.814-66.462,66.462s29.814,66.462,66.462,66.462
          c36.647,0,66.462-29.814,66.462-66.462S137.57,189.538,100.923,189.538z M100.923,292.923C80.563,292.923,64,276.36,64,256
          s16.563-36.923,36.923-36.923c20.36,0,36.923,16.563,36.923,36.923S121.283,292.923,100.923,292.923z"/>
								</g>
							</g>
							<g>
								<g>
									<path d="M462.769,211.692h-256c-8.157,0-14.769,6.613-14.769,14.769v59.077c0,8.157,6.613,14.769,14.769,14.769h256
          c8.157,0,14.769-6.613,14.769-14.769v-59.077C477.538,218.305,470.926,211.692,462.769,211.692z M448,270.769H221.538v-29.538H448
          V270.769z"/>
								</g>
							</g>
							<g>
								<g>
									<path d="M100.923,379.077c-36.647,0-66.462,29.814-66.462,66.462S64.276,512,100.923,512c36.647,0,66.462-29.814,66.462-66.462
          S137.57,379.077,100.923,379.077z M100.923,482.462c-20.36,0-36.923-16.563-36.923-36.923c0-20.36,16.563-36.923,36.923-36.923
          c20.36,0,36.923,16.563,36.923,36.923C137.846,465.898,121.283,482.462,100.923,482.462z"/>
								</g>
							</g>
							<g>
								<g>
									<path d="M462.769,401.231h-256c-8.157,0-14.769,6.613-14.769,14.769v59.077c0,8.157,6.613,14.769,14.769,14.769h256
          c8.157,0,14.769-6.613,14.769-14.769V416C477.538,407.843,470.926,401.231,462.769,401.231z M448,460.308H221.538v-29.538H448
          V460.308z"/>
								</g>
							</g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
							<g></g>
						</svg>
					</span>
        </div>
    </div>
    <!-- coidea:grid-list:navigation+switcher END -->

    <!-- coidea:grid-list:main-section START -->
    <div class="grid masonry">

        <div class="masonry__item" th:onclick="'JavaScript:lookRecord(\''+${art.blogsId}+'\')'" th:each="art:${result.data.articles}">
            <figure>
                <figcaption class="content">
                    <h2>[[${art.blogsTitle}]]</h2>
                    <p class="date"><span>Updated</span> [[${#dates.format(art.updateTime,'yyyy-MM-dd')}]]</p>
                    <ul class="tags">
                        <li><a href="#!" title="作者"><span>
							作者：
						</span>[[${art.uName}]]</a></li>
                        <li><a href="#!" title="点赞数">点赞数：[[${art.like}]]</a></li>
                        <li><a href="#!" title="阅读数">阅读数：[[${art.readSize}]]</a></li>
                        <li><a href="#!" class="more" data-click-state="1">+</a></li>
                    </ul>
                </figcaption>
            </figure>
        </div>

    </div>
    <!-- coidea:grid-list:main-section END -->

    <form style="display: none;" id="searchForm" th:action="@{/logs/search/index}">
        <input name="query" id="queryValue"/>
    </form>

	<form th:action="@{/}" style="display: none;" id="URL"></form>

</section>
<!-- coidea:grid-list END -->

<script th:src="@{/js/jquery-1.9.0.min.js}" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<script src="https://unpkg.com/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>
<script th:src="@{/assets/js/demo.js}"></script>
<script>
    var showSearchFlag = true;

	layui.use('layer', function () {
		var layer = layui.layer;
	});


	function lookRecord(id) {
		layer.open({
			type: 2,
			title: '博客详情',
			shadeClose: true,
			shade: false,
			maxmin: true, //开启最大化最小化按钮
			area: ['893px', '780px'],
			content: $("#URL").attr("action") + 'logs/search/find/one/essay?id=' + id
		});
	}

    // 监听Input的回车
    $(".search_input").keypress(function (e) {
        if (e.which == 13) {

            $("#queryValue").val($("#query").val());
            $("#searchForm").submit();
        }
    });

    // 显示和隐藏Input
    function showSearch(obj) {
        if (showSearchFlag) {
            $(".search_input").stop().fadeIn(200);
            showSearchFlag = false;
            $(obj).html("-");
        } else {
            $(".search_input").stop().fadeOut(100);
            showSearchFlag = true;
            $(obj).html("+");
        }

    }
</script>
</body>
</html>
